@use "styles/Radius.module.scss";
@use "styles/Spacings.module.scss";
@use "styles/Typography.module.scss";

.hiden {
  display: none;
}

.markdown {
  p {
    margin: 0;
    padding: 0;
    align-items: center;
  }

  ul {
    list-style-type: disc;
    margin-top: 0;
    padding: 0;
    margin-left: Spacings.$spacing05;
    display: flex;
    flex-direction: column;
    gap: Spacings.$spacing03;

    li {
      white-space-collapse: collapse;
    }
  }

  ol {
    list-style-type: decimal;
    padding-left: Spacings.$spacing05;
    list-style-position: outside;

    li {
      white-space-collapse: collapse;
    }
  }

  h1 {
    @include Typography.H1;
  }

  h2 {
    @include Typography.H2;
  }

  h3 {
    @include Typography.H3;
  }

  table {
    width: 100%;
    border-collapse: collapse;
    margin: Spacings.$spacing05 0;
  }

  thead {
    background-color: var(--background-1);
  }

  tr {
    border-bottom: 1px solid var(--border-0);
  }

  th,
  td {
    padding: Spacings.$spacing03;
    text-align: left;
  }

  th {
    font-weight: bold;
  }

  pre[class*="language-"] {
    background: var(--background-5);
    color: var(--white-0);
    padding: Spacings.$spacing05;
    border-radius: Radius.$normal;
    overflow: auto;
    margin: 0 0 Spacings.$spacing05 0;
    white-space: pre-wrap;
    font-size: Typography.$small;
    font-family: "Courier New", Courier, monospace;
  }

  code[class*="language-"] {
    background: none;
    color: inherit;
    border-radius: Radius.$normal;
    font-family: "Courier New", Courier, monospace;
    font-size: Typography.$small;
    white-space: pre-wrap;
  }

  code {
    background: var(--background-5);
    color: var(--white-0);
    padding: Spacings.$spacing01;
    border-radius: Radius.$normal;
    font-family: "Courier New", Courier, monospace;
    font-size: Typography.$medium;
  }

  .code_block {
    .icon {
      position: absolute;
      right: 0;
      padding: Spacings.$spacing05;
    }
    code {
      white-space: pre-wrap;
    }
  }
}

.thinking {
  animation: pulse 1s infinite;
  font-size: 2px;
  line-height: 16px;
  width: 16px;
  display: flex;
  justify-content: center;
}

@keyframes pulse {
  0% {
    font-size: 6px;
  }

  50% {
    font-size: 16px;
  }

  100% {
    font-size: 6px;
  }
}
